import React, { useState, useEffect } from 'react'
import './Css/Real_time_data.css'


import { getteamleader } from '../../../../request/api'
export default function Product_sales_ranking(props) {
    useEffect(() => {
        Getteamleader()
    }, [])
    const [groudata, setGroudata] = useState([])
    const Getteamleader = async () => {
        const res = await getteamleader({})
        setGroudata(res.data)
    }
    return (
        <div className='Head_of_Group_Sales'>
            <div className='Real_time_data_title'>
                {props.title}
                <p >
                    <span style={{ fontSize: '0.3rem' }}>今日 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>本周 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>本月 &nbsp; &nbsp;</span>
                    <span style={{ fontSize: '0.3rem' }}>全年 &nbsp; &nbsp;</span>
                    &nbsp; &nbsp;
                </p>
            </div>
            <div>
                {groudata.map((item, index) => {
                    return <p className='Head_of_Group_Sales_p'>
                        <span style={{ marginLeft: '0.3rem' }}>
                            <div className='circle'>{index + 1}</div>
                            {item.name}
                        </span>
                        <span>大山石景区</span>
                        <span style={{ marginRight: '0.3rem' }}>{item.daar_num}</span>
                    </p>
                })
                }
            </div>
        </div>
    )
}
